<template>
  <u-sticky :h5-nav-height="0">
    <view class="tablist">
      <view
        :class="['item', item.id === status ? 'on' : '']"
        v-for="item of list"
        :key="item.id"
        @click="Emit.$emit('handle', 'status', item.id)"
      >
        <view> {{ item.name }}</view></view
      >
    </view>
  </u-sticky>
</template>

<script>
export default {
  props: {
    status: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      list: [
        { name: "全部", id: "-1" },
        { name: "待支付", id: "4" },
        { name: "未开始", id: "0" },
        { name: "进行中", id: "1" },
        { name: "待评价", id: "2" },
        { name: "已取消", id: "3" },
      ],
    };
  },

  computed: {},

  methods: {},

  mounted() {},
};
</script>

<style lang="less" scoped>
.tablist {
  display: flex;
  background: #fff;

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    // width: 20%;
    flex: 1;

    height: 90rpx;
    overflow: hidden;

    view {
      position: relative;
      font-size: 26rpx;
      color: #262626;

      &:after {
        content: "";
        position: absolute;
        bottom: -10rpx;
        left: 0rpx;
        right: 0rpx;
        height: 6rpx;
        background: #f1270d;
        opacity: 0;
      }
    }

    &.on {
      view {
        font-weight: bold;

        &:after {
          opacity: 1;
        }
      }
    }
  }
}
</style>
